<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
  >
    <template #top>
      <wd-navbar 
        title="展厅风采" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

    <view class="px-[24rpx] box-border">
      <view 
        class="mt-[24rpx]" 
        v-for="item in dataList" 
        :key="item.id"
      >
        <!-- 分类标题 -->
        <view class="text-[32rpx] font-[600] text-[#333] mb-[10rpx] text-shadow-[2px_0px_2px_rgba(0,0,0,0.2)] ml-[15rpx]">
          {{ item.category }}
        </view>
        
        <!-- 图片展示 -->
        <view class="bg-white rounded-[16rpx] overflow-hidden h-[344rpx]">
          <image 
            :src="item.imageUrl" 
            mode="widthFix"
            class="w-full block"
            :style="{ height: item.height || 'auto' }"
          />
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ShowRoom',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // 使用假数据模拟
  setTimeout(() => {
    const mockData = [
      {
        id: 1,
        category: '展厅',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341400582.png',
        height: '340rpx'
      },
      {
        id: 2,
        category: '荣誉墙',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341434646.png',
        height: '340rpx'
      },
      {
        id: 4,
        category: '产品馆',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341462414.png',
        height: '340rpx'
      },
      {
        id: 5,
        category: '产品墙',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341481843.png',
        height: '340rpx'
      },
      {
        id: 6,
        category: '仿生手',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341500816.png',
        height: '340rpx'
      },
      {
        id: 6,
        category: '专注力测试赛道',
        imageUrl: 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341522976.png',
        height: '340rpx'
      }
    ]
    
    pagingRef.value?.complete(mockData)
  }, 500)
}
</script>

<style>
page{
  background-color: #F5F5F5;
}
</style>
